<!DOCTYPE html>
<html ng-app="app">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimal-ui">
  <meta name="format-detection" content="telephone=no">
  <link rel="stylesheet" href="css/reset.css">
  <style type="text/css">
    html {
      width: 100%;
      height: 100%;
      overflow-x: hidden;
    }

    body {
      text-align: left;
      width: 100%;
      overflow: hidden;
      background: #e9dfc7;
    }

    .m-read-content {
      font-size: 14px;
      color: #555;
      line-height: 31px;
      padding: 15px;
    }

    .m-read-content h4 {
      font-size: 20px;
      color: #736357;
      border-bottom: 1px solid #736357;
      letter-spacing: 2px;
      margin: 0 0 1px 0;
    }

    .m-read-content p {
      text-indent: 2em;
      margin: .5em 0;
      letter-spacing: 0;
      line-height: 24px;
    }

    .m-button-bar {
      padding: 0 15px;
    }

    .u-tab {
      display: table;
      width: 100%;
      height: 34px;
      margin: 10px auto;
      line-height: 34px;
      border-radius: 8px;
      border: 1px solid #858682;
      background: #000;
      color: #fff;
      opacity: .9;
    }

    .u-tab li {
      display: table-cell;
      text-align: center;
    }

    .u-tab li:first-child {
      border-right: 1px solid #858382;
    }

    .top-nav {
      position: fixed;
      top: 0;
      height: 50px;
      width: 100%;
      line-height: 50px;
      background: #000;
      z-index: 200;
    }

    .icon-back {
      display: inline-block;
      width: 23px;
      height: 23px;
      background: url() no-repeat center/contain;
      vertical-align: -6px;
      margin: 0 5px 0 10px;
    }

    .nav-pannel {
      position: fixed;
      bottom: 70px;
      left: 0;
      width: 100%;
      z-index: 2;
    }

    .nav-pannel-bk {
      position: absolute;
      width: 100%;
      height: 135px;
      background: #000;
      bottom: 70px;
      z-index: 1;
    }

    .child-mod {
      padding: 5px 10px;
      margin: 15px;
    }

    .artical-action-mid {
      position: fixed;
      z-index: 500;
      width: 100%;
      height: 40%;
      top: 30%;
    }
  </style>
</head>
<body>
<section id="root" class="container">
  <div class="m-artical-action">
    <div class="artical-action-mid" id="action_mid"></div>
  </div>
  <header id="top_nav" class="top-nav J_show" style="display:none">
    <span class="icon-back"></span>
    <span class="nav-title">返回书架</span>
  </header>

  <article id="fition_chapter_title"></article>
  <article id="fition_container" class="m-read-content">
    <h4>能斯蒂芬斯蒂芬</h4>
    <p>as是的会计法了 空间是的会计法了 空间是的会计法了 空间是的会计法了 空间链接链接 快乐，空间链接。进口量</p>
    <p>as是的会计法了as是的会计法了 空间链接链接 快乐，空间链接。进口量</p>
    <p>as是的会计法了 as是的会计法了as是的会计法了as是的会计法了 快乐，空间链接。进口量</p>
  </article>
  <article class="m-button-bar">
    <ul class="u-tab">
      <li id="prev_button">上一页</li>
      <li id="next_button">下一页</li>
    </ul>
  </article>

  <div class="nav-pannel-bk J_show" style="display:none"></div>
  <footer class="nav-pannel J_show" id="font_container" style="display:none">
    <div class="child-mod">
      <span>字号</span>
      <button type="button" id="large-font" class="font-size-button">大</button>
      <button type="button" id="small-font" class="font-size-button">小</button>
    </div>
    <div class="child-mod">
      <span>背景</span>
      <div class="bk-container">
        <span class="bk-container-current"></span>
      </div>
    </div>
  </footer>
</section>
<script src="lib/zepto.min.js"></script>
<script>
  window.jQuery = $;
</script>
<script src="js/jquery.base64.js"></script>
<script src="js/jquery.jsonp.js"></script>

<script>
  (function () {
    'use strict';

    // 全局
    var $win = $(window);
    var $j_show = $('.J_show');
    var $container = $('.m-read-content');

    // 自定义方法
    var Util = (function () {
      var prefix = 'html5_reader_'
      var StorageGetter = function (key) {
        return localStorage.getItem(prefix + key);
      };
      var StorageSetter = function (key, val) {
        return localStorage.setItem(prefix + key, val);
      };
      var getBSONP = function (url, callback) {
        return $.jsonp({
          url: url,
          cache: true,
          callback: 'duokan_fiction_chapter',
          success: function (result) {
            var data = $.base64.decode(result);
            var json = decodeURIComponent(escape(data));
            callback(json);
          }
        });
      }
      return {
        getBSONP: getBSONP,
        StorageGetter: StorageGetter,
        StorageSetter: StorageSetter
      }
    })();

    // todo 项目入口函数
    var readermodel;
    var readerUI;

    function main() {
      EventHanlder();
      readermodel = ReaderModel();
      readerUI = ReaderBaseFrame();
      readermodel.init(function (data) {
        readerUI(data);
      });
    }

    // todo 实现阅读器相关数据的交互方法
    function ReaderModel() {
      var Chapter_id;
      var ChapterTotal;
      var init = function (callback) {

        // getFicionInfo(function(){
        //     getCurChapterContent(Chapter_id,function(data){
        //         // todo ...
        //       callback && callback(data);
        //     });
        // });

        getFicionInfoPromise().then(function (data) {
          return getCurChapterContentPromise();
        }).then(function (data) {
          callback && callback(data);
        });

      };
      var getFicionInfo = function (callback) {
        $.get('data/chapter.json', function (data) {
          // 获取章节信息后的回调
          Chapter_id = Util.StorageGetter('last_chapter_id') || data.chapters[1].chapter_id;
          ChapterTotal = data.chapters.length;
          callback && callback();
        }, 'json');
      };

      // es6
      var getFicionInfoPromise = function () {
        return new Promise(function (resolve, reject) {
          $.get('data/chapter.json', function (data) {
            // 获取章节信息后的回调
            if (data.result == 0) {
              Chapter_id = Util.StorageGetter('last_chapter_id') || data.chapters[1].chapter_id;
              ChapterTotal = data.chapters.length;
              resolve(data);
            }
          }, 'json');
        });
      };

      var getCurChapterContent = function (chapter_id, callback) {
        $.get('data/data' + chapter_id + '.json', function (data) {
          if (data.result == 0) {
            var url = data.jsonp;
            Util.getBSONP(url, function (data) {
              callback && callback(data);
            });
          }
        }, 'json');
      };

      // es6
      var getCurChapterContentPromise = function () {
        return new Promise(function (resolve, reject) {
          $.get('data/data' + Chapter_id + '.json', function (data) {
            if (data.result == 0) {
              var url = data.jsonp;
              Util.getBSONP(url, function (data) {
                resolve(data);
              });
            }
          }, 'json');
        });
      };

      var prevChapter = function (UIcallback) {
        Chapter_id = parseInt(Chapter_id, 10);
        if (Chapter_id == 0) {
          return;
        }
        Chapter_id--;
        getCurChapterContent(Chapter_id, UIcallback);
        Util.StorageSetter('last_chapter_id', Chapter_id);
      };
      var nextChapter = function (UIcallback) {
        Chapter_id = parseInt(Chapter_id, 10);
        if (Chapter_id == ChapterTotal) {
          return;
        }
        Chapter_id++;
        getCurChapterContent(Chapter_id, UIcallback);
        Util.StorageSetter('last_chapter_id', Chapter_id);
      };
      return {
        init: init,
        prevChapter: prevChapter,
        nextChapter: nextChapter
      }
    }

    // todo 渲染UI结构
    function ReaderBaseFrame() {
      function parseChaperData(jsonData) {
        var jsonObj = JSON.parse(jsonData);
        var html = '<h4>' + jsonObj.t + '</h4>';
        for (var i = 0; i < jsonObj.p.length; i++) {
          html += '<p>' + jsonObj.p[i] + "</p>";
        }
        return html;
      }

      return function (data) {
        $container.html(parseChaperData(data));
      }
    }

    // todo 交互事件绑定
    function EventHanlder() {
      $('#action_mid').click(function () {
        $j_show.toggle();
      });

      $win.scroll(function () {
        $j_show.hide();
      });

      // todo 获取章节翻页数据
      $('#prev_button').click(function () {
        readermodel.prevChapter(function (data) {
          readerUI(data);
        });
      });
      $('#next_button').click(function () {
        readermodel.nextChapter(function (data) {
          readerUI(data);
        });
      });
    }

    main();

  })();
</script>
</body>
</html>